import React, { useState } from 'react'

import { RouteComponentProps } from 'react-router-dom'
import { inject, observer } from 'mobx-react'
import HomeStore from '../../stores/HomeStory'

import CRUDPage from '../../components/crud/CRUDPage'

import '../../config/dark-theme.less'
import {
  Button,
  Descriptions,
  Drawer,
  Space,
  Image,
  List,
  Avatar,
  Empty,
  Row,
  Col,
  Popconfirm,
  message,
  Tooltip,
  Tag,
} from 'antd'
import { request } from '../../api/request'
import { DeleteOutlined } from '@ant-design/icons'

interface UserAdminProps extends RouteComponentProps {
  HomeStore: HomeStore
}

export interface UserType {
  name: string
  remark: string
  cTime: string
  id: number
  isDel: number
  age: number
}

const UserAdmin: React.FC<UserAdminProps> = (props: UserAdminProps) => {
  const [drawerVisible, setDrawerVisible] = useState(false)
  const [goodsDrawerVisible, setGoodsDrawerVisible] = useState(false)
  const [addrDrawerVisible, setAddrDrawerVisible] = useState(false)
  const [orderRecode, setOrderRecode] = useState([])

  const getRecode = (
    url: String,
    userId: number,
    type: 'order' | 'goods' | 'addr' | 'other'
  ) => {
    switch (type) {
      case 'goods':
        setGoodsDrawerVisible(true)
        break
      case 'order':
        setDrawerVisible(true)
        break
      case 'addr':
        setAddrDrawerVisible(true)
        break
      default:
        break
    }
    request
      .get({
        url: url,
        data: { page: 1, pageSize: 10000, userId: userId },
      })
      .then((data) => {
        setOrderRecode(data.data.recode)
      })
      .catch((e) => {})
  }

  const columns = [
    {
      title: '订单',
      dataIndex: 'orders',
      width: 80,
      render: (text: string, recode: any) => {
        return (
          <Button
            type='link'
            onClick={() => getRecode('/order/list', recode.id, 'order')}
            size='small'
          >
            订单详情
          </Button>
        )
      },
    },
    {
      title: '商品',
      dataIndex: 'goods',
      width: 80,
      render: (text: string, recode: any) => {
        return (
          <Button
            type='link'
            onClick={() => getRecode('/goods/list', recode.id, 'goods')}
            size='small'
          >
            商品详情
          </Button>
        )
      },
    },
  ] as any
  return (
    <>
      <CRUDPage
        addUrl='/user/add'
        queryUrl='/user/list'
        deleteUrl='/user/delete'
        updateUrl='/user/update'
        childColumns={columns}
      />
      <Drawer
        title='订单详情'
        placement='right'
        onClose={() => {
          setDrawerVisible(false)
          setOrderRecode([])
        }}
        visible={drawerVisible}
        width={500}
      >
        {orderRecode.length > 0 ? (
          orderRecode.map((item: any, index) => {
            return (
              <Descriptions
                title={
                  <div
                    style={{
                      textAlign: 'center',
                      maxWidth: '400px',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    <Tooltip title={item.name}>订单编号:{item.name}</Tooltip>
                  </div>
                }
                key={index}
                column={2}
              >
                <Descriptions.Item span={1}>
                  <Image
                    key={index}
                    width={200}
                    height={272}
                    src={item?.goods?.cover}
                    placeholder={
                      <Image
                        preview={false}
                        src={item?.goods?.cover}
                        width={200}
                      />
                    }
                  />
                </Descriptions.Item>
                <Descriptions.Item span={1}>
                  <Descriptions column={1}>
                    <Descriptions.Item label='商品名称'>
                      <b>{item?.goods?.name}</b>
                    </Descriptions.Item>
                    <Descriptions.Item label='购买数量'>
                      <b>{item.goodsNum}</b>(件)
                    </Descriptions.Item>
                    <Descriptions.Item label='订单金额'>
                      ¥
                      <div style={{ color: 'red' }}>
                        <b>{item.price}</b>
                      </div>
                    </Descriptions.Item>

                    <Descriptions.Item label='商品单价'>
                      ¥
                      <div style={{ color: 'red' }}>
                        <b>{item?.goods?.price}</b>{' '}
                      </div>
                    </Descriptions.Item>
                    <Descriptions.Item label='交易时间'>
                      {item.startTime}
                    </Descriptions.Item>
                    <Descriptions.Item label='订单状态'>
                      <Tag color='#2db7f5'>{item?.orderStatus?.title}</Tag>
                    </Descriptions.Item>
                  </Descriptions>
                </Descriptions.Item>
              </Descriptions>
            )
          })
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </Drawer>
      <Drawer
        title='商品详情'
        placement='right'
        onClose={() => {
          setGoodsDrawerVisible(false)
          setOrderRecode([])
        }}
        visible={goodsDrawerVisible}
        width={1160}
      >
        {orderRecode.length > 0 ? (
          <Space size={12} wrap>
            {orderRecode.map((item: any, index) => {
              return (
                <Space size={2} direction='vertical'>
                  <Image
                    key={index}
                    width={200}
                    height={272}
                    src={item.cover}
                    placeholder={
                      <Image preview={false} src={item.cover} width={200} />
                    }
                  />
                  <div
                    style={{
                      textAlign: 'center',
                      maxWidth: '200px',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    <Tooltip title={item.name}>
                      <b>{item.name}</b>
                    </Tooltip>
                    <br />
                    <b style={{ color: 'red' }}>¥{item.price}</b>
                    <br />
                    <Tooltip title={item.remark}>
                      <p>{item.remark}</p>
                    </Tooltip>
                  </div>
                </Space>
              )
            })}
          </Space>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </Drawer>
      <Drawer
        title='地址详情'
        placement='right'
        onClose={() => {
          setAddrDrawerVisible(false)
          setOrderRecode([])
        }}
        visible={addrDrawerVisible}
        width={400}
      >
        <List
          itemLayout='horizontal'
          dataSource={orderRecode}
          renderItem={(item: any) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar src='https://joeschmoe.io/api/v1/random' />}
                title={item.title}
                description={
                  <Row>
                    <Col span={20}>
                      <div>
                        <p>通信方式：{item.phone}</p>
                        <p>通信地址：{item.addr}</p>
                      </div>
                    </Col>
                    <Col span={4}>
                      <Popconfirm
                        title='你确定要删除吗?'
                        onConfirm={() => {
                          request
                            .delete({ url: `/addr/delete`, data: [item.id] })
                            .then((data: any) => {
                              message.success(data.message)
                              getRecode('/addr/list', item.userId, 'addr')
                            })
                            .catch((e) => {})
                        }}
                        onCancel={() => {}}
                        okText='确认删除'
                        cancelText='取消'
                      >
                        <Button
                          size='small'
                          type='primary'
                          icon={<DeleteOutlined />}
                          danger
                        />
                      </Popconfirm>
                    </Col>
                  </Row>
                }
              />
            </List.Item>
          )}
        />
      </Drawer>
    </>
  )
}

export default inject('HomeStore')(observer(UserAdmin))
